<template>
    <div class="dashboard-container">
      <!-- 左侧导航栏 -->
      <aside class="sidebar">
        <div class="logo-section">
          <img src="@/assets/logo.png" alt="Logo" class="logo" />
          <div class="text-section">
            <h2>党建平台</h2>
            <p>江西师范大学软件学院党建平台</p>
          </div>
        </div>
        <nav class="menu">
          <div class="menu-item" @click="toggleDropdown('dashboard')">
            仪表盘
            <span v-if="dropdownOpen.dashboard">▲</span>
            <span v-else>▼</span>
          </div>
          <div v-if="dropdownOpen.dashboard" class="submenu">
            <a href="#" class="submenu-item">概览</a>
            <a href="#" class="submenu-item">分析</a>
          </div>
  
          <div class="menu-item" @click="toggleDropdown('settings')">
            系统设置
            <span v-if="dropdownOpen.settings">▲</span>
            <span v-else>▼</span>
          </div>
          <div v-if="dropdownOpen.settings" class="submenu">
            <a href="#" class="submenu-item">用户管理</a>
            <a href="#" class="submenu-item">权限设置</a>
          </div>
  
          <div class="menu-item" @click="toggleDropdown('interface')">
            界面设置
            <span v-if="dropdownOpen.interface">▲</span>
            <span v-else>▼</span>
          </div>
          <div v-if="dropdownOpen.interface" class="submenu">
            <a href="#" class="submenu-item">主题</a>
            <a href="#" class="submenu-item">布局</a>
          </div>
  
          <div class="menu-item" @click="toggleDropdown('team')">
            团队成员
            <span v-if="dropdownOpen.team">▲</span>
            <span v-else>▼</span>
          </div>
          <div v-if="dropdownOpen.team" class="submenu">
            <a href="#" class="submenu-item">成员列表</a>
            <a href="#" class="submenu-item">邀请成员</a>
          </div>
  
          <!-- 跳转到 Voting 页面 -->
          <div class="menu-item" @click="navigateToVoting">
            线上投票
          </div>
  
          <div class="menu-item" @click="logout">
            退出
          </div>
        </nav>
      </aside>
  
      <!-- 主内容区域 -->
      <div class="main-content">
        <!-- 顶部导航栏 -->
        <header class="header">
          <div class="welcome">
            欢迎您，第一党支部xxx
          </div>
          <div class="notifications">
            <span class="notification-icon">🔔</span>
            <span class="notification-count">1</span>
          </div>
        </header>
  
        <!-- 信息栏和最近的工作区域 -->
        <section class="content">
          <div class="info-bar">
            <button class="info-button">信息栏</button>
          </div>
          <div class="recent-work">
            <h3>最近的工作</h3>
            <p class="no-record">没有记录</p>
          </div>
        </section>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "Dashboard",
    data() {
      return {
        dropdownOpen: {
          dashboard: false,
          settings: false,
          interface: false,
          team: false,
        },
      };
    },
    methods: {
      toggleDropdown(menu) {
        this.dropdownOpen[menu] = !this.dropdownOpen[menu];
      },
      navigateToVoting() {
        // 跳转到 Voting 页面
        this.$router.push({ name: 'Voting' });
      },
      logout() {
        // 跳转回首页 (假设首页路径为 /login)
        this.$router.push({ name: 'Login' });
      },
    },
  };
  </script>
  
  <style scoped>
  /* 页面整体布局 */
  .dashboard-container {
    display: flex;
    height: 100vh;
    width: 100vw;
    background-color: #f5f5f5;
  }
  
  /* 左侧导航栏样式 */
  .sidebar {
    width: 250px;
    background-color: #d9534f;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
  }
  .logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }
  .logo {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
  }
  .text-section h2 {
    margin: 0;
    font-size: 18px;
    color: #fff;
  }
  .text-section p {
    font-size: 12px;
    color: #f8f8f8;
    margin: 0;
  }
  .menu {
    width: 100%;
    padding-top: 20px;
  }
  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
  }
  .menu-item:hover {
    background-color: #c0392b;
  }
  
  /* 子菜单样式 */
  .submenu {
    background-color: #b8433b;
    padding-left: 20px;
  }
  .submenu-item {
    display: block;
    padding: 10px 0;
    color: #f5f5f5;
    text-decoration: none;
    font-size: 13px;
  }
  .submenu-item:hover {
    color: #fff;
  }
  
  /* 主内容样式 */
  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
  }
  
  /* 顶部导航栏 */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #ddd;
  }
  .welcome {
    font-size: 16px;
  }
  .notifications {
    display: flex;
    align-items: center;
  }
  .notification-icon {
    font-size: 20px;
    margin-right: 5px;
  }
  .notification-count {
    background-color: #ff6b6b;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
  }
  
  /* 信息栏和最近的工作样式 */
  .content {
    padding: 20px;
  }
  .info-bar {
    margin-bottom: 20px;
  }
  .info-button {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  .recent-work {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  }
  .no-record {
    color: red;
  }
  </style>
  